import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Checkbox, Row } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getSupplierAll, getSupplierByAuth, updataSupplier } from '@/services/supplier/distribution'

const Distribution = props => {
    const { form } = props
    const { getFieldDecorator } = form
    const [pageSize, setPageSize] = useState('99999')
    const [supplierList, setSupplierList] = useState([])

    useEffect(() => {
        init()
    }, [])

    const init = async () => {
        await getSupplierAlls()
    }

    // 表单查询
    const handleSearch = e => {
        e.preventDefault()
        form.validateFields((err, values) => {
            console.log('Received values of form: ', values)

        })
    }
    // 表单清空
    const handleReset = e => {
        form.resetFields();
    }
    // 查询条件
    const getFields = () => {
        return (
            <Col span={8}>
                <Form.Item label={`名称`}>
                    {getFieldDecorator(`id`, {})
                        (<Input />)}
                </Form.Item>
            </Col>
        )
    }
    // 按钮处理
    const handleBtn = type => {

    }
    // 获取全部商户
    const getSupplierAlls = async () => {
        let params = {
            pageSize
        }
        let res = await getSupplierAll(params)
        if (res.code === '0') {
            let list = res.data
            // 赋予权限情况
            let selectList = await getSupplierByAuths()
            list.forEach(item => {
                if (selectList.includes(item.id)) {
                    item.auth = true
                } else {
                    item.auth = false
                }
            })
            setSupplierList(list)
        } else {
            alert(res.msg)
        }
    }
    // 获取已授权的商户
    const getSupplierByAuths = async () => {
        let params = {
            objId: "sharePayMoeny"
        }
        let res = await getSupplierByAuth(params)
        if (res.code === '0') {
            return res.data.supplierList
        } else {
            alert(res.msg)
        }
    }
    // 选择商户
    function onChange(checkedValues) {
        console.log('checked = ', checkedValues);
    }
    // 循环渲染
    const RenderSupplier = () => {
        let items = []
        supplierList.forEach((item, index) => {
            items.push(<Col span={8} key={item.id}><Checkbox  onChange={e => authChange(e, index)} value={index} checked={item.auth}>{item.merchantName}</Checkbox></Col>)
        })
        return(
            <Row>
                {items}
            </Row>
        )
    }
    // 全选
    const selectAll = () => {
        let list = supplierList
        list.forEach(item => {
            item.auth = true
        })
        setSupplierList([...list])
    }
    // 取消全选
    const selectNone = () => {
        let list = supplierList
        list.forEach(item => {
            item.auth = false
        })
        setSupplierList([...list])
    }
    // 保存
    const save = async () => {
        let selectList = []
        supplierList.forEach(item => {
            if (item.auth) {
                selectList.push(item.id)
            }
        })
        let params = {
            objId: "sharePayMoeny",
            supplierList: selectList
        }
        let res = await updataSupplier(params)
        if (res.code === '0') {
            selectList = res.data.supplierList
            let list = supplierList
            list.forEach(item => {
                if (selectList.includes(item.id)) {
                    item.auth = true
                } else {
                    item.auth = false
                }
            })
            setSupplierList([...list])
        } else {
            alert(res.msg)
        }
    }
    // 选择改变
    const authChange = (e, index) => {
        supplierList[index].auth = e.target.checked
        setSupplierList([...supplierList])
    }
    return (
        <PageHeaderWrapper>
            <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
            <RenderButtom click={handleBtn} />
            <Button type="primary" onClick={selectAll}>全选</Button>
            <Button type="primary" onClick={selectNone} style={{margin: '0 12px'}}>取消全选</Button>
            <Button type="primary" onClick={save}>保存</Button>
            <div style={{margin: '12px 0', fontWeight: '700'}}>请选择商户</div>
            <RenderSupplier />
   </PageHeaderWrapper>
    )
}

export default Form.create()(Distribution)
